<template>
  <div class="address-warp">
    <van-nav-bar title="收货地址" left-arrow @click-left="onClickLeft" />
    <div class="address">
      <van-empty v-if="this.empty" description="哎呀 您还没有收货地址哦" />
      <van-address-list
        v-model="chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @add="clickHandle"
        @edit="onEdit"
        v-if="!this.empty"
        @select="selectHandle"
      />
      <div class="van-address-list__bottom" v-if="this.empty" @click="clickHandle">
        <button
          class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
        >
          <div class="van-button__content">
            <span class="van-button__text">新增地址</span>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { getAddress } from "@/api/address.js";
import Vue from "vue";
import { Empty } from "vant";
import { NavBar } from "vant";
import { Toast } from "vant";
import { AddressList } from "vant";

Vue.use(AddressList);
Vue.use(NavBar);
Vue.use(Empty);
export default {
  data() {
    return {
      empty: true,
      addressList: [],
      chosenAddressId: 1
    };
  },
  methods: {
    // 订单页进来选地址
    selectHandle(item) {
      console.log(item);
      let query = this.$route.query;
      if (JSON.stringify(query) !== '{}') {
        this.$router.push({
          name: "ConfirmOrder",
          params: {
            address: item,
            orderQuery: this.$route.query
          }
        });
      }
    },
    clickHandle() {
      this.$router.push("/addAddress");
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    async getData() {
      let rs = await getAddress();
      if (rs.status === 200) {
        if (rs.data.length !== 0) {
          this.addressList = rs.data;
          this.addressList.forEach(item => {
            item.address =
              item.province + item.city + item.county + item.addressDetail;
          });
          this.empty = false;
        }
      } else {
        Toast("网络不好请重试");
      }
    },
    onEdit(item, index) {
      this.$router.push({ name: "EditAddress", query: { id: item.id } });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="stylus" scoped>
.address-warp {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;

  .van-nav-bar >>> .van-icon {
    color: #0f0f0f !important;
  }

  .address {
    flex: 1;

    .van-empty {
      height: 100%;
    }
  }

  .van-address-list__bottom {
    padding: 0;
  }

  .van-button--round {
    border-radius: 0;
  }

  .van-address-list__add {
    height: 44px;
    margin: 0;
    line-height: 44px;
  }

  .van-button--danger {
    background-color: #c3a769;
    border: none;
  }

  .van-address-item >>> .van-radio__icon--checked >>> .van-icon {
    background-color: #c3a769 !important;
    border-color: #c3a769 !important;
  }
}
</style>